<template>
  <div class="leasingmachinemanagement">
      <Card class="leasingmachinemanagement-card">
          <div style="display: flex;">
                <div class="felx-lease" style="flex:2">
                        <div class="state-tips">
                            <t-tooltip
                                class="placement top center"
                                content="已出租的状态"
                                :overlay-style="{ backgroundColor: ' #0048cd' , color: '#fff' , fontWeight: '600' }"
                                show-arrow
                            >
                                <span class="tips">已出租 <span class="Statecolor-green"></span></span>
                            </t-tooltip>
                            <t-tooltip
                                class="placement top center"
                                content="未出租的状态"
                                :overlay-style="{ backgroundColor: '#f2995f' , color: '#fff' , fontWeight: '600' }"
                                show-arrow
                            >
                                <span class="tips">未出租 <span class="Statecolor-blue"></span></span>
                            </t-tooltip>
                            <t-tooltip
                                class="placement top center"
                                content="损坏的状态"
                                :overlay-style="{ backgroundColor: ' #e34d59' , color: '#fff' , fontWeight: '600' }"
                                show-arrow
                            >
                                <span class="tips">损坏 <span class="Statecolor-pink"></span></span>
                            </t-tooltip>
                            <t-tooltip
                                class="placement top center"
                                content="结算中的状态"
                                :overlay-style="{ backgroundColor: '#ed7b2f' , color: '#fff' , fontWeight: '600' }"
                                show-arrow
                            >
                                    <span class="tips">结算中 <span class="Statecolor-yellow"></span></span>
                            </t-tooltip>
                            <t-tooltip
                                class="placement top center"
                                content="待添加的状态"
                                :overlay-style="{ backgroundColor: '#00a870' , color: '#fff' , fontWeight: '600' }"
                                show-arrow
                            >
                                    <span class="tips">待添加 <span class="Statecolor-gray"></span></span>
                            </t-tooltip>
                        </div>
                        <div>
                            <t-select v-model="Lease" :options="options1" placeholder="请选择租赁机" />
                        </div>
                </div>
                <div class="btn">
                    <t-button v-if="leaseedit == 1" @click="edit">编辑</t-button>
                    <t-button theme="danger" v-else @click="remove">清除</t-button>
                    <t-button  v-if="leaseedit == 2" @click="cancel">取消</t-button>
                    <t-button  v-else theme="danger" @click="cancel">取消</t-button>
                </div>
          </div>
          
          <div style="display: flex;">
            <div class="state">
                <div class="Lease-button">
                    <span class="lease-btn" v-for="(item,index) in leaselist" :key="index">
                        <div class="name"  v-if="item.cabinet != ''">
                            <input v-if="isshow" @click="tapinput(index,item)" class="input-btn" ref="inputbtn" type="checkbox" :checked="item.checked" />
                            <div style="padding-bottom: 30px;" @click="bounced(item)">
                                <div class="positioning">
                                    <span v-if="item.status == 0" class="number-btn-blue">{{ item.cabinet }}</span>
                                    <span v-if="item.status == 1" class="number-btn-red">{{ item.cabinet }}</span>
                                    <span v-if="item.status == 2" class="number-btn-Shalloworange">{{ item.cabinet }}</span>
                                    <span v-if="item.status == 3" class="number-btn-green">{{ item.cabinet }}</span>
                                    <span v-if="item.status == 4" class="number-btn">{{ item.cabinet }}</span>
                                </div>
                                <span>{{ item.name }}</span>
                                <span>{{ item.Serial }}</span>
                            </div>
                            <!-- <span class="time-btn" v-if="item.time != ''">{{ item.time }}</span> -->
                        </div>
                        <div class="icon-add" v-else @click="addlease">
                            <IconFont name="add"></IconFont>
                        </div>
                    </span>
                </div>
            </div>
            <div class="right-lease">
                <div class="top-btn">
                    <span class="title">出租记录</span>
                    <!-- 列表 -->
                    <t-table
                        rowKey="index"
                        :data="data"
                        :columns="columns"
                        table-content-width="table-layout: 'auto'"
                        bordered
                        >
                        <template #default="slotProps">
                            <a class="link"><IconFont name="chevron-right" @click="rehandleClickOp(slotProps)"></IconFont></a>
                            <!-- <a class="link" @click="rehandleClickOp(slotProps)">删除</a> -->
                        </template>
                    </t-table>
                     <t-pagination
                        style="margin-top: 10px"
                        size="small"
                        :maxPageBtn="6"
                        :total="36"
                        :default-current="2"
                        :default-page-size="10"
                        :pageSizeOptions="[16]"
                        @current-change="onCurrentChange"
                        @page-size-change="onPageSizeChange"
                        @change="onChange"
                    />
                </div>
                
            </div>
          </div>
      </Card>
      <Rentbounced ref="Rentbounced" :confirmBody="bounceddata" @remorent="remorent"/>
  </div>
</template>

<script>
import Card from '@/components/card/index.vue'; // 导入卡片
import { IconFont } from 'tdesign-icons-vue';
import Rentbounced from './Rentbounced.vue' // 出租弹框

const data = [];
for (let i = 0; i < 20; i++) {
  data.push({
    index: i,
    platform: i % 2 === 0 ? '共有' : '私有',
    type: ['String', 'Number', 'Array', 'Object'][i % 4],
    default: ['-', '0', '[]', '{}'][i % 4],
    detail: {
      position: `读取 ${i} 个数据的嵌套信息值`,
    },
    needed: i % 4 === 0 ? '是' : '否',
    description: '数据源',
  });
}

export default {
    name: 'Leasingmachinemanagement',
    components: {
        Card,
        Rentbounced,
        IconFont
        // Addemployees
    },
    data() {
        return {
            isshow: false , // 是否显示多选
            Lease: '', // 选中的租赁机
            bounceddata: '', // 传输到弹框的数据
            options1: [
                { label: '租赁机1', value: '1' },
                { label: '租赁机2', value: '2' },
            ],
            btnlease: [],
            leaselist: [], // 机器数组
            data, // 数据
            columns: [
                {
                    align: 'center',
                    width: 80,
                    colKey: 'index',
                    title: '柜号',
                    fixed: 'left',
                },
                {
                    colKey: 'platform',
                    title: '商品编号',
                    width: 150,
                    fixed: this.leftFixedColumn >= 2 ? 'left' : undefined,
                },
                {
                    colKey: 'type',
                    title: '时间',
                    width: 100,
                    // fixed: 'left',
                },
                {
                    colKey: 'default',
                    title: '查看',
                    width: 100,
                },
            ],
            leaseedit:  1, // 是否显示编辑
            current: 12, // 分页数据
            pageSize: 5, // 分页数据
            cabinetlist: [], // 选中的柜子
        }
    },
    watch : {
        cabinetlist () {
            if (this.cabinetlist.length != 0) {
                this.leaseedit = 2
            }
        }, 
        // 监听
        Lease () {
            this.unpdata()
        }
    },
    mounted () {
        // 生命周期
        this.unpdata()
    },
    methods : {
        // 获取数据
        unpdata () {
            this.$request.get('/api/Leasingma-chinemanagement').then((res) => {
                if (res.data.code == 200) {
                    this.leaselist = res.data.data.list
                }
            })
            .catch((error) => {
                console.log(error);
            })
        },

        // 子组件删除
        remorent () {
            this.unpdata()
        },

        // 分页
        onPageSizeChange(size, pageInfo) {
            console.log('Page Size:', this.pageSize, size, pageInfo);
        },
        onCurrentChange(current, pageInfo) {
            console.log('Current Page', this.current, current, pageInfo);
        },
        onChange(pageInfo) {
            console.log('Page Info: ', pageInfo);
        },

        // 点击柜子出现弹框
        bounced (item) {
            this.$refs.Rentbounced.visible = true;
            this.bounceddata = item;
        },

        // 添加
        addlease () {

        },

        // 点击选中的柜子触发的函数
        tapinput (index, item) {
            this.cabinetlist.push(index);  // 添加数组的下标
        },

        // 清除
        remove () {
               // 循环删除数据
               this.cabinetlist.map(item => {
                    this.leaselist.splice(item , 1);
               })
               this.cabinetlist = [];
               this.leaseedit = 1;
               this.isshow = false;
               this.leaselist.forEach(item => {
                   item.checked = '';
               });
        },

        // 编辑
        edit () {
            this.isshow = true;
        },

        // 取消
        cancel () {
            this.leaseedit = 1;
            this.isshow = false;
        }
    }
}
</script>

<style lang="less" scoped>
.leasingmachinemanagement {
    .felx-lease {
        display: flex; 
        margin-bottom: 20px;
        width: 30%;
        align-items: center;
        flex-wrap: wrap;
        .state-tips {
            // width: 100%;
            // flex: 2;
            .tips {
                margin-right: 10px;
                margin-left: 20px;
                font-weight: 500;
                    .Statecolor-green {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        background-color: #0048cd;
                        border-radius: 50%;
                        margin-left: 4px;
                    }
                    .Statecolor-blue {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        background-color: #f2995f;
                        border-radius: 50%;
                        margin-left: 4px;
                    }
                            .Statecolor-pink {
                                display: inline-block;
                                width: 10px;
                                height: 10px;
                                background-color: #e34d59;
                                border-radius: 50%;
                                margin-left: 4px;
                            }
                            .Statecolor-yellow {
                                display: inline-block;
                                width: 10px;
                                height: 10px;
                                background-color:#ed7b2f;
                                border-radius: 50%;
                                margin-left: 4px;
                            }
                            .Statecolor-gray {
                                display: inline-block;
                                width: 10px;
                                height: 10px;
                                background-color:#00a870;
                                border-radius: 50%;
                                margin-left: 4px;
                            }
                    }
                }
    }
    
    .leasingmachinemanagement-card {
        .state {
            border: 1px solid #999;
            padding: 10px;
            box-sizing: border-box;
            font-weight: 600;
            width: 70%;
            height: 1100px;
            border-radius: 6px;
            .Lease-button {
                // height: 75vh;
                height: 98%;
                width: 100%;
                margin-top: 10px;
                border: 3px solid #999;
                border-radius: 4px;
                overflow: hidden;
                overflow-y:scroll;
                // padding: 20px;
                .lease-btn {
                    display: inline-block;
                    width: 14%;
                    border-radius: 4px;
                    height: 100px;
                    border: 1px solid #999;
                    text-align: center;
                    box-shadow: -1px 5px 5px #d8d8d8;
                    position: relative;
                    margin-top: 20px;
                    margin-left: 30px;
                    .name {
                        margin-top: 25px;
                        .input-btn {
                            position: absolute;
                            top: 6px;
                            right: 6px;
                        }
                        .positioning {
                            position: absolute;
                            top: 0;
                            left: 0;
                            .number-btn {
                                background-color: #ed7b2f;
                                color: #fff;
                                font-size: 16px;
                                border-radius: 4px 0 4px 0;
                                padding: 0 10px;
                            }
                        }
                        .time-btn {
                            // background-color: #ECF7EE;
                            // margin-right: 10px;
                        }
                        span {
                            display: block;
                        }
                    }
                    .icon-add {
                        margin-top: 30px;
                        font-size: 22px;
                        font-weight: 600;
                    }
                }
                .lease-btn:hover {
                        border: 3px solid #7ED4F9;
                }
            }
        }
        .right-lease {
            width: 28%;
            margin-left: 20px;
            // height: 100%;
            .top-btn {
                border: 1px solid #999;
                border-radius: 6px;
                padding: 10px;
                // height: 100%;
            }
            .title {
                font-size: 16px;
                font-weight: 600;
            }
        }
    }
}

.number-btn-blue {
     background-color: #0048cd;
     color: #fff;
     font-size: 16px;
     border-radius: 4px 0 4px 0;
     padding: 0 10px;
}
.number-btn-red {
     background-color: #e34d59;
     font-size: 16px;
     border-radius: 4px 0 4px 0;
     padding: 0 10px;
     color: #fff;
}
.number-btn-Shalloworange {
     background-color: #f2995f;
     font-size: 16px;
     border-radius: 4px 0 4px 0;
     padding: 0 10px;
     color: #fff;
}
.number-btn-green {
     background-color: #00a870;
     font-size: 16px;
     border-radius: 4px 0 4px 0;
     padding: 0 10px;
     color: #fff;
}
.btn {
    // display: inline-block;
    // width: 400px;
    // margin-top: 90px;
    // text-align: center;
    margin-right: 20px;
}


</style>